<template>
    <el-container class="home">
        <el-aside :width="isCollapse ? '80px' : '200px'">
            <div class="title-logo" @click="gohome">
                <img src="~assets/logo.png" width="50px" alt="" />
                <span v-show="!isCollapse">以物易物</span>
            </div>
            <el-menu
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                background-color="#222222"
                text-color="#aaa"
                active-text-color="#fff"
                :collapse="isCollapse"
                router
            >
                <el-menu-item
                    :index="item.url"
                    v-for="(item, index) in tablist"
                    :key="index"
                >
                    <i :class="iconObj[index]"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container class="content">
            <el-header>
                <div class="header-left">
                    <el-link
                        @click="togglePress"
                        :underline="false"
                        icon="el-icon-s-fold"
                    ></el-link>
                </div>
                <div>
                    <!-- <el-badge>
                        <el-button class="share-button" icon="el-icon-message-solid" type="primary"></el-button>
                    </el-badge> -->
                    <el-button type="text" @click="loginOut">退出</el-button>
                </div>
                
            </el-header>
            <el-main>
                <router-view />
            </el-main>
            <el-footer>
                <!-- <el-link>东巴资源管理系统</el-link> -->
            </el-footer>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: false,
            tablist: [
                { name: "用户管理", url: "/home" },
                { name: "分类管理", url: "/news" },
                { name: "论坛管理", url: "/Ynintroduce" },
                { name: "物品管理", url: "/Ynstory" },
                // { name: "文献索引", url: "/Ynindex" },
                // { name: "东巴民俗", url: "/Ynminsu" },
                // { name: "文创产品", url: "/Ynproduct" },
                // { name: "底部新闻", url: "/dbnews" },
            ],
            activeName: "综合介绍",
            activeIndex: "/mainConet",
            iconObj: {
                0: "el-icon-s-order",
                1: "el-icon-s-data",
                2: "el-icon-s-management",
                3: "el-icon-s-custom",
                // 4: "el-icon-s-custom",
                // 5: "el-icon-s-custom",
                // 6: "el-icon-s-custom",
                // 7: "el-icon-s-custom",
            },
        };
    },
    methods: {
        gohome() {
            this.$router.push("/mainConet").catch((e) => {});
            this.activeName = "神灵形象";
        },


        togglePress() {
            this.isCollapse = !this.isCollapse;
        },
        loginOut() {
            sessionStorage.removeItem('token');
            this.$router.replace('/');
        },
    },
};
</script>
<style lang="scss" scoped>
.home {
    height: 100%;
    .el-aside {
        background-color: #222222;
        .title-logo {
            cursor: pointer;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
                font-size: 18px;
                font-weight: bolder;
                color: #fff;
                padding: 10px 10px;
                margin: 10px;
                border-left: 1px solid #fff;
            }
        }
        .el-menu {
            border: none;
        }
    }
    .content {
        .el-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-left {
                .el-link {
                    font-size: 20px;
                }
            }
        }
    }
    .el-footer {
        text-align: center;
    }
}
</style>
